<template> 
   <div :class="`message ${cal}-message`"  v-show="name!=='' && name !== null">
      <div :class="`message-${cal}`"><img :src="src" class="avatar" v-show="cal==='received'"> <span
          class="message-content">{{name}}</span> <img :src="src" class="avatar" v-show="cal==='sent'"></div>
    </div>
</template>
  
<script>
export default{
    props:["cal","src","name"]
}
</script>
  
<style>
</style>